<template>
  <section class="main">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item label="打卡日期">
                <a-range-picker @change="onDateChange" />
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="打卡记录">
      <!-- <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div> -->
      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="recordDate"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="false"
          :loading="listDataLoading"
          :scroll="{ x: true }"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
          <template slot="recordDate" slot-scope="text, record">
            {{ text }}
            <span v-if="record.dateTag">
              <br />
              {{ record.dateTag }}
            </span>
          </template>
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>
    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import moment from 'moment'

export default {
  name: 'Punch',
  mixins: [BloodProfileMixin],
  components: {},
  data() {
    // const renderContent = (value, row, index, field) => {
    //   let element = ''
    //   if ((value != undefined && value != null) || row[field + 'Describe']) {
    //     if (value) {
    //       var img = value.split(',')
    //       element = img.map(item => {
    //         return (
    //           <div style="width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
    //             <div style="float:left; width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
    //               <img style="width: 80px; height: 80px;" src={item} preview={img}></img>
    //             </div>
    //           </div>
    //         )
    //       })
    //     }

    //     if (row[field + 'Describe']) {
    //       if (element && element.length > 0) {
    //         element.push(<p>{row[field + 'Describe']}</p>)
    //       } else {
    //         element = <span>{row[field + 'Describe']}</span>
    //       }
    //     }
    //   } else if (value == null) {
    //     element = <h3 style="font-weight:bold; color: red">漏打</h3>
    //   }

    //   const obj = {
    //     children: element, // 这是渲染列的值，支持渲染html
    //     attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
    //   }
    //   if (row.recordStat != 1) {
    //     obj.attrs.colSpan = 0 // 该列不渲染
    //   }
    //   return obj
    // }

    // const lowHighRenderContent = (value, row, index, field) => {
    //   let element = ''
    //   if (value) {
    //     if (row[field] && row[field] == 1) {
    //       element = (
    //         <span style="font-weight:bold; color: red">
    //           {value} <img src="../up.png" />
    //         </span>
    //       )
    //     } else if (row[field] && row[field] == 3) {
    //       element = (
    //         <span style="font-weight:bold; color: red">
    //           {value} <img src="../down.png" />
    //         </span>
    //       )
    //     } else {
    //       element = <span>{value}</span>
    //     }
    //   } else if (value == null) {
    //     element = <h3 style="font-weight:bold; color: red">漏打</h3>
    //   }

    //   const obj = {
    //     children: element, // 这是渲染列的值，支持渲染html
    //     attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
    //   }
    //   return obj
    // }

    function planStateToText(state) {
      let text = ''
      switch (state) {
        case 2:
          text = '漏打'
          break
        case 3:
          text = '待打卡'
          break
        case 4:
          text = '-'
          break
      }
      return text
    }

    function describeToText(describe, field) {
      if (['k13', 'k14', 'k15', 'k16'].indexOf(field) > -1) {
        return describe == 1 ? '遵嘱用药' : describe == 2 ? '漏用药' : '自停药'
      } else if (['k17', 'k18', 'k19', 'k20'].indexOf(field) > -1) {
        return describe == 1 ? '遵嘱注射' : describe == 2 ? '漏注射' : '自停打'
      } else {
        return describe
      }
    }

    const lowHighRenderContent = (value, row, index, field) => {
      // if (signinRecords[`${v.key}PlanState`] != 1 && signinRecords[`${v.key}PlanState`] != undefined) {
      //   v.value = this.planStateToText(signinRecords[`${v.key}PlanState`])
      //   v.status = 0
      //   this.$set(v, 'normal', false)
      // } else {
      //   if(signinRecords[`${v.key}Describe`] != null && signinRecords[`${v.key}Describe`] != '') {
      //     v.value = signinRecords[`${v.key}Describe`]
      //     this.$set(v, 'is_pic', false)
      //   } else {
      //     v.value = signinRecords ? (signinRecords[v.key] ? signinRecords[v.key].split(',') : '') : ''
      //     this.$set(v, 'is_pic', true)
      //   }
      //   v.status = signinRecords ? signinRecords[`${v.key}State`] : 0
      //   this.$set(v, 'normal', true)
      // }
      let element
      // 周汇总
      if (row.recordStat && row.recordStat != 1) {
        element = <span>{value}</span>
        return {
          children: element, // 这是渲染列的值，支持渲染html
          attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
        }
      } else {
        if (row[`${field}PlanState`] != 1 && row[`${field}PlanState`] != undefined) {
          if (row[`${field}PlanState`] == 2) {
            element = <h3 style="font-weight:bold; color: red">{planStateToText(row[`${field}PlanState`])}</h3>
          } else {
            element = <span>{planStateToText(row[`${field}PlanState`])}</span>
          }
        } else {
          if (row[`${field}State`] == 1) {
            element = (
              <span>
                {value} <img style="width:12px;height:12px;" src="../shenggao.png" />
              </span>
            )
          } else if (row[`${field}State`] == 3) {
            element = (
              <span>
                {value} <img style="width:12px;height:12px;" src="../jiangdi.png" />
              </span>
            )
          } else {
            element = <span>{value}</span>
          }
        }
        return {
          children: element, // 这是渲染列的值，支持渲染html
          attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
        }
      }
    }

    const imageRenderContent = (value, row, index, field, col = 0) => {
      let element
      // 周汇总
      if (row.recordStat && row.recordStat != 1) {
        element = <span>{value}</span>
        return {
          children: element, // 这是渲染列的值，支持渲染html
          attrs: {
            // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
            colSpan: col
          }
        }
      } else {
        if (row[`${field}PlanState`] != 1 && row[`${field}PlanState`] != undefined) {
          if (row[`${field}PlanState`] == 2) {
            element = <h3 style="font-weight:bold; color: red">{planStateToText(row[`${field}PlanState`])}</h3>
          } else {
            element = <span>{planStateToText(row[`${field}PlanState`])}</span>
          }
        } else {
          if (row[`${field}Describe`] != null && row[`${field}Describe`] != '') {
            element = <span>{describeToText(row[`${field}Describe`], field)}</span>
          } else {
            let img = value.split(',')
            // element = img.map(item => {
            element = (
              <div style="width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
                <div style="float:left; width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                  <img style="width: 80px; height: 80px;" src={img[0]} preview={img}></img>
                </div>
              </div>
            )
            // })
          }
        }
        return {
          children: element, // 这是渲染列的值，支持渲染html
          attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
        }
      }
    }

    return {
      moment,
      queryParam: {
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
        startTime: '2020-01-01',
        endTime: moment().format('YYYY-MM-DD')
      },
      listColumns: [
        {
          title: '日期/监测项',
          align: 'center',
          dataIndex: 'recordDate',
          width: 120,
          fixed: 'left',
          scopedSlots: { customRender: 'recordDate' }
        },
        {
          title: '空腹血糖',
          align: 'center',
          width: 80,
          dataIndex: 'k1',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k1')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k1State')
        },
        {
          title: '早餐后血糖',
          align: 'center',
          width: 80,
          dataIndex: 'k2',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k2')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k2State')
        },
        {
          title: '午餐前血糖',
          align: 'center',
          width: 80,
          dataIndex: 'k3',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k3')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k3State')
        },
        {
          title: '午餐后血糖',
          align: 'center',
          width: 80,
          dataIndex: 'k4',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k4')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k4State')
        },
        {
          title: '晚餐前血糖',
          align: 'center',
          width: 80,
          dataIndex: 'k5',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k5')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k5State')
        },
        {
          title: '晚餐后血糖',
          align: 'center',
          width: 80,
          dataIndex: 'k6',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k6')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k6State')
        },
        {
          title: '凌晨血糖',
          align: 'center',
          width: 80,
          dataIndex: 'k7',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k7')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k7State')
        },
        {
          title: '睡前血糖',
          align: 'center',
          width: 80,
          dataIndex: 'k8',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k8')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k8State')
        },
        {
          title: '早餐',
          align: 'center',
          width: 120,
          dataIndex: 'k9',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k9', 3)
          // customRender: (value, row, index) => {
          //   let element = ''
          //   if (value || row['k9Describe']) {
          //     if (row.recordStat != 1) {
          //       element = <span>{value}</span>
          //     } else {
          //       if (value) {
          //         var img = value.split(',')
          //         element = img.map(item => {
          //           return (
          //             <div style="width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
          //               <div style="float:left; width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
          //                 <img style="width: 80px; height: 80px;" src={item} preview={img}></img>
          //               </div>
          //             </div>
          //           )
          //         })
          //       }
          //       if (row['k9Describe']) {
          //         if (element && element.length > 0) {
          //           element.push(<p>{row['k9Describe']}</p>)
          //         } else {
          //           element = <span>{row['k9Describe']}</span>
          //         }
          //       }
          //     }
          //   } else {
          //     element = <h3 style="font-weight:bold; color: red">漏打</h3>
          //   }
          //   const obj = {
          //     children: element, // 这是渲染列的值，支持渲染html
          //     attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
          //   }
          //   if (row.recordStat != 1) {
          //     obj.attrs.colSpan = 3 // 该列不渲染
          //   }
          //   return obj
          // }
        },
        {
          title: '午餐',
          align: 'center',
          width: 120,
          dataIndex: 'k10',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k10')
          // customRender: (value, row, index) => renderContent(value, row, index, 'k10')
        },
        {
          title: '晚餐',
          align: 'center',
          width: 120,
          dataIndex: 'k11',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k11')
          // customRender: renderContent,
          // customRender: (value, row, index) => renderContent(value, row, index, 'k11')
        },
        {
          title: '运动',
          align: 'center',
          width: 120,
          dataIndex: 'k12',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k12', 1)
          // customRender: (value, row, index) => {
          //   let element = ''
          //   if (value || row['k12Describe']) {
          //     if (row.recordStat != 1) {
          //       if (value.length > 30) {
          //         element = (
          //           <a-tooltip title={value || ''}>
          //             <div>
          //               <span>{value.substr(0, 30) + '...'}</span>
          //             </div>
          //           </a-tooltip>
          //         )
          //       } else {
          //         element = <span>{value}</span>
          //       }
          //     } else {
          //       if (value) {
          //         var img = value.split(',')
          //         element = img.map(item => {
          //           return (
          //             <div style="width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
          //               <div style="float:left; width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
          //                 <img style="width: 80px; height: 80px;" src={item} preview={img}></img>
          //               </div>
          //             </div>
          //           )
          //         })
          //       }
          //       if (row['k12Describe']) {
          //         if (element && element.length > 0) {
          //           element.push(<p>{row['k12Describe']}</p>)
          //         } else {
          //           element = <span>{row['k12Describe']}</span>
          //         }
          //       }
          //     }
          //   } else {
          //     element = <h3 style="font-weight:bold; color: red">漏打</h3>
          //   }
          //   const obj = {
          //     children: element, // 这是渲染列的值，支持渲染html
          //     attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
          //   }
          //   if (row.recordStat != 1) {
          //     obj.attrs.colSpan = 1 // 该列不渲染
          //   }
          //   return obj
          // }
        },
        {
          title: '用药（早）',
          align: 'center',
          width: 120,
          dataIndex: 'k13',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k13', 4)
          // customRender: (value, row, index) => {
          //   let element = ''
          //   if (value || row['k13Describe']) {
          //     if (row.recordStat != 1) {
          //       element = <span>{value}</span>
          //     } else {
          //       if (value) {
          //         var img = value.split(',')
          //         element = img.map(item => {
          //           return (
          //             <div style="width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
          //               <div style="float:left; width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
          //                 <img style="width: 80px; height: 80px;" src={item} preview={img}></img>
          //               </div>
          //             </div>
          //           )
          //         })
          //       }

          //       if (row['k13Describe']) {
          //         if (element && element.length > 0) {
          //           element.push(<p>{row['k13Describe']}</p>)
          //         } else {
          //           element = <span>{row['k13Describe']}</span>
          //         }
          //       }
          //     }
          //   } else {
          //     element = <h3 style="font-weight:bold; color: red">漏打</h3>
          //   }
          //   const obj = {
          //     children: element, // 这是渲染列的值，支持渲染html
          //     attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
          //   }
          //   if (row.recordStat != 1) {
          //     obj.attrs.colSpan = 4 // 该列不渲染
          //   }
          //   return obj
          // }
        },
        {
          title: '用药（午）',
          align: 'center',
          width: 120,
          dataIndex: 'k14',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k14')
          // customRender: (value, row, index) => renderContent(value, row, index, 'k14')
        },
        {
          title: '用药（晚）',
          align: 'center',
          width: 120,
          dataIndex: 'k15',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k15')
          // customRender: (value, row, index) => renderContent(value, row, index, 'k15')
        },
        {
          title: '用药睡前',
          align: 'center',
          width: 120,
          dataIndex: 'k16',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k16')
          // customRender: (value, row, index) => renderContent(value, row, index, 'k16')
        },
        {
          title: '胰岛素(早)',
          align: 'center',
          width: 120,
          dataIndex: 'k17',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k17', 4)
          // customRender: (value, row, index) => {
          //   let element = ''
          //   if (value || row['k17Describe']) {
          //     if (value) {
          //       var img = value.split(',')
          //       element = img.map(item => {
          //         return (
          //           <div style="width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
          //             <div style="float:left; width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
          //               <img style="width: 80px; height: 80px;" src={item} preview={img}></img>
          //             </div>
          //           </div>
          //         )
          //       })
          //     }

          //     if (row['k17Describe']) {
          //       if (element && element.length > 0) {
          //         element.push(<p>{row['k17Describe']}</p>)
          //       } else {
          //         element = <span>{row['k17Describe']}</span>
          //       }
          //     }
          //   } else {
          //     element = <h3 style="font-weight:bold; color: red">漏打</h3>
          //   }
          //   const obj = {
          //     children: element, // 这是渲染列的值，支持渲染html
          //     attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
          //   }
          //   if (row.recordStat != 1) {
          //     obj.attrs.colSpan = 4 // 该列不渲染
          //   }
          //   return obj
          // }
        },
        {
          title: '胰岛素(午)',
          align: 'center',
          width: 120,
          dataIndex: 'k18',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k18')
          // customRender: (value, row, index) => renderContent(value, row, index, 'k18')
        },
        {
          title: '胰岛素(晚)',
          align: 'center',
          width: 120,
          dataIndex: 'k19',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k19')
          // customRender: (value, row, index) => renderContent(value, row, index, 'k19')
        },
        {
          title: '胰岛素(睡前)',
          align: 'center',
          width: 120,
          dataIndex: 'k20',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k20')
          // customRender: (value, row, index) => renderContent(value, row, index, 'k20')
        },
        {
          title: '睡眠',
          align: 'center',
          dataIndex: 'k21',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k21')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k21State')
        },
        {
          title: '体重（KG）',
          align: 'center',
          dataIndex: 'k22',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k22')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k22State')
        },
        {
          title: '尿酮',
          align: 'center',
          dataIndex: 'k23',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k23', 1)
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k23State')
        },
        {
          title: '腰围（CM）',
          align: 'center',
          dataIndex: 'k24',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k24')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k24State')
        },
        {
          title: '晨起收缩压',
          align: 'center',
          dataIndex: 'k25',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k25')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k25State')
        },
        {
          title: '晨起舒张压',
          align: 'center',
          dataIndex: 'k26',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k26')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k26State')
        },
        {
          title: '晨起心率',
          align: 'center',
          dataIndex: 'k27',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k27')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k27State')
        },
        {
          title: '睡前收缩压',
          align: 'center',
          dataIndex: 'k28',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k28')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k28State')
        },
        {
          title: '睡前舒张压',
          align: 'center',
          dataIndex: 'k29',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k29')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k29State')
        },
        {
          title: '睡前心率',
          align: 'center',
          dataIndex: 'k30',
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k30')
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k30State')
        },
        {
          title: '早营养素',
          align: 'center',
          dataIndex: 'k31',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k31', 1)
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k30State')
        },
        {
          title: '中营养素',
          align: 'center',
          dataIndex: 'k32',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k32', 1)
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k30State')
        },
        {
          title: '晚营养素',
          align: 'center',
          dataIndex: 'k33',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k33', 1)
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k30State')
        },
        {
          title: '睡前营养素',
          align: 'center',
          dataIndex: 'k34',
          customRender: (value, row, index) => imageRenderContent(value, row, index, 'k34', 1)
          // customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'k30State')
        }
      ],
      url: {
        // 按日期分组获取患者打卡记录
        getList: '/101/11/1011101'
      }
    }
  },
  methods: {
    onDateChange(date, dateString) {
      this.queryParam.startTime = dateString[0]
      this.queryParam.endTime = dateString[1]
    },
    searchQuery() {
      this.loadData()
    },
    searchReset() {
      this.queryParam.startTime = '2020-01-01'
      this.queryParam.endTime = moment().format('YYYY-MM-DD')
      this.loadData()
    }
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
.table-operator {
  margin-bottom: 10px;
}

.clName .ant-tree li span.ant-tree-switcher,
.ant-tree li span.ant-tree-iconEle {
  width: 10px !important;
}

.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #1890ff !important;
}
// .wordWrap {
//   word-break: break-word;
//   text-overflow: ellipsis;
//   overflow: hidden;
//   display: -webkit-box;
//   -webkit-line-clamp: 4;
//   -webkit-box-orient: vertical;
// }
</style>

